<template>
  <div>
    <div>
      <el-form :model="paramsFormData" :rules="rules" ref="paramsFormData">
        <h4 v-if="page=='gee'">方法参数</h4>
        <h4 v-if="page!=='gee'">模型参数</h4>
        <el-form-item v-for="(value,key) in paramsFormData" :prop="key" :key="key" :label="paramsFormDataName[key]">
          <div v-if="form_list[key].datatype== 'Integer'">
            <span>
              <el-input  v-model.number="paramsFormData[key]" :placeholder="paramsFormDataDescribe[key]"></el-input>
              <!--<el-input  v-model.number="paramsFormData[key]" :placeholder="'请输入'+paramsFormDataDescribe[key]"></el-input>-->
            </span>
          </div>
          <div v-else>
            <!--<el-input ref="formInput" v-model="paramsFormData[key]"-->
            <!--:placeholder="'请输入'+paramsFormDataDescribe[key]"></el-input>-->
            <el-input ref="formInput" v-model="paramsFormData[key]"
                      :placeholder="paramsFormDataDescribe[key]"></el-input>
            <span style="float:right;" id="icon">
              <a @click="openFilePosition" v-if="form_list[key].in===0 & form_list[key].source==='fs'">
                <n3-icon type="folder-open" size="large"></n3-icon>
              </a>
              <a @click="openPosition" v-if="form_list[key].name.indexOf('空间范围')!==-1">
                <n3-icon type="map-marker" size="large" style="margin-left:-80%"></n3-icon>
              </a>
              <!--<a v-if="form_list[key].out===0" class="output">-->
              <!--<input id="outfile" name="file" type="file" @change="outFileChange" ref="outinputer">-->
              <!--<label for="outfile">-->
              <!--<n3-icon type="folder-open-o" size="large"></n3-icon>-->
              <!--</label>-->
              <!--</a>-->
            </span>
          </div>
        </el-form-item>
        <span id="watch">
          <el-button v-if="page!=='gee'" type="success" @click="submit">提交</el-button>
          <el-button v-if="page=='gee'" type="success"  @click="commit">确定</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
      </span>
      </el-form>
    </div>
    <div>
    </div>
  </div>
</template>


<script>
    import Vue from 'vue';

    export default {
        name: "modelForm",
        data() {
            return {
                paramsFormData: {},
                paramsFormDataName: {},
                paramsFormDataDescribe: {},
                rules: {},
            }
        },
        components: {},
        props: {
            form_list: Array,
            artifactId: String,
            dialogVisible: Object,
            page:String,
            currentItemId:String,
        },
        methods: {
            openPosition(e) {
                this.$Bus.$emit('positionVisible.v', true);
                let that = this;
                let string = $(e.target).parent().parent().siblings()[0].innerHTML;
                let matchStr=string.match(/请输入(\S*)"/)[1];
                this.$Bus.$on('coordinate',(params)=>{
                    for(let i=0;i<=that.form_list.length;i++){
                        if (that.form_list[i].description.indexOf(matchStr) !== -1) {
                            that.paramsFormData[i] = params;
                            break;
                        }
                    }
                });
            },
            openFilePosition(e) {
                let that = this;
                this.$Bus.$emit('fileVisible.v', true);
                let string = $(e.target).parent().parent().siblings()[0].innerHTML;
                let matchStr=string.match(/请输入(\S*)"/)[1];
                this.$Bus.$on('fileData',(filePramas)=>{
                    for(let i=0;i<=that.form_list.length;i++){
                        if (that.form_list[i].description.indexOf(matchStr) !== -1) {
                            that.paramsFormData[i] = filePramas;
                            break;
                        }
                    }
                });
            },
            outFileChange(e) {
                let outFileString = $(e.target).parent().parent().siblings()[0].innerHTML;
                let outMatchStr=outFileString.match(/请输入(\S*)"/)[1];
                console.log(outMatchStr)
                if (e.target.files.length > 0){
                    for(let i=0;i<=this.form_list.length;i++){
                        if(this.form_list[i].description.indexOf(outMatchStr)!==-1){
                            this.paramsFormData[i]=e.target.files[0].name;
                            break;
                        }
                    }
                }
            },
            reset() {
                this.$refs["paramsFormData"].resetFields();
            },
            submit() {
                let obj = this;
                if(this.artifactId == 'BKmeans'){
                    let modelparamData = {};
                    let random = new Date().getTime();
                    modelparamData.customname = "聚类分析";
                    modelparamData.params = ["/czd/odTest", "/output/task/od-cluster11/bkmeans_Points", "/output/task/od-cluster11/bkmeans_Clusters", "csv", "2,3", "10", "20", "100"];
                    modelparamData.params[1] = "/output/task/od-cluster11/bkmeans_Points" + random;
                    modelparamData.params[2] = "/output/task/od-cluster11/bkmeans_Clusters_" + random;
                    this.$axios.post(
                        // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
                        '/parallel/use/' + this.artifactId, modelparamData
                    ).then(function (response) {
                        if (response.code === 200) {
                            obj.$message({
                                type: 'success',
                                message: '模型提交成功!请前往模型项目查看运行进度！'
                            });
                        }
                    }).catch(function (error) {
                        obj.$message.error('模型提交失败!');
                    });
                }else if(this.artifactId == 'ODPairDetectionVehicle'){
                    let modelparamData = {};
                    modelparamData.customname = "车辆点对识别";
                    let random = new Date().getTime();
                    modelparamData.params = ["/zju/data/taxi", "/czd/odTest", "csv", "0", "1", "2", "3", "4", "10"];
                    modelparamData.params[1] = "/czd/odTest_" + random;
                    this.$axios.post(
                        // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
                        '/parallel/use/' + this.artifactId, modelparamData
                    ).then(function (response) {
                        if (response.code === 200) {
                            obj.$message({
                                type: 'success',
                                message: '模型提交成功!请前往模型项目查看运行进度！'
                            });
                        }
                    }).catch(function (error) {
                        obj.$message.error('模型提交失败!');
                    });
                }else{
                    this.$refs["paramsFormData"].validate((valid) => {
                        if (valid) {
                            let modelparamData = {};
                            // modelparamData.user = "ubt";
                            let para = [];
                            for (let i = 0; i < Object.keys(obj.paramsFormData).length - 1; i++) {
                                para.push(obj.paramsFormData["" + (i + 1)])
                            }
                            modelparamData.params = para;
                            modelparamData.customname = this.paramsFormData["0"];
                            // console.log(modelparamData.customname = this.paramsFormData["0"]);
                            this.$axios.post(
                                // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
                                '/parallel/use/' + this.artifactId, modelparamData
                            ).then(function (response) {
                                if (response.code === 200) {
                                    obj.$message({
                                        type: 'success',
                                        message: '模型提交成功!请前往模型项目查看运行进度！'
                                    });
                                }
                            }).catch(function (error) {
                                obj.$message.error('模型提交失败!');
                            });
                            let visible = this.dialogVisible;
                            visible.v = false;
                            this.$emit("update:dialogVisible", visible);
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    })
                }
            },
            commit() {
                let obj = this;
                if (this.artifactId == 'BKmeans') {
                    let modelparamData = {};
                    let random = new Date().getTime();
                    modelparamData.customname = "聚类分析";
                    modelparamData.params = ["/czd/odTest", "/output/task/od-cluster11/bkmeans_Points", "/output/task/od-cluster11/bkmeans_Clusters", "csv", "2,3", "10", "20", "100"];
                    modelparamData.params[2] = "/output/task/od-cluster11/bkmeans_Clusters_" + random;
                    this.$axios.post(
                        // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
                        '/parallel/use/' + this.artifactId, modelparamData
                    ).then(function (response) {
                        if (response.code === 200) {
                            // obj.$message({
                            //     type: 'success',
                            //     message: '模型提交成功!请前往模型项目查看运行进度！'
                            // });
                            obj.$emit("getGeeParam", modelparamData);
                            let visible = this.dialogVisible;
                            visible.v = false;
                            obj.$emit("update:dialogVisible", visible);
                        }
                    }).catch(function (error) {
                        // obj.$message.error('模型提交失败!');
                    });
                } else if (this.artifactId == 'ODPairDetectionVehicle') {
                    let modelparamData = {};
                    modelparamData.customname = "车辆点对识别";
                    let random = new Date().getTime();
                    modelparamData.params = ["/zju/data/taxi", "/czd/odTest", "csv", "0", "1", "2", "3", "4", "10"];
                    modelparamData.params[1] = "/czd/odTest_" + random;
                    this.$axios.post(
                        // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
                        '/parallel/use/' + this.artifactId, modelparamData
                    ).then(function (response) {
                        if (response.code === 200) {
                            // obj.$message({
                            //     type: 'success',
                            //     message: '模型提交成功!请前往模型项目查看运行进度！'
                            // });
                            obj.$emit("getGeeParam", modelparamData);
                            let visible = this.dialogVisible;
                            visible.v = false;
                            obj.$emit("update:dialogVisible", visible);
                        }
                    }).catch(function (error) {
                        // obj.$message.error('模型提交失败!');
                    });
                } else {
                    this.$refs["paramsFormData"].validate((valid) => {
                        if (valid) {
                            let para = [];
                            let paras = {};
                            for (let i = 0; i < Object.keys(obj.paramsFormData).length; i++) {
                                para.push(obj.paramsFormData["" + (i)] + "");
                            }
                            paras.artifactId = this.artifactId;
                            paras.taskId = this.currentItemId;
                            paras.params = para;
                            obj.$emit("getGeeParam", paras);
                            let visible = this.dialogVisible;
                            visible.v = false;
                            this.$emit("update:dialogVisible", visible);
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    })
                }
            }
        },
        watch: {
            form_list: {
                handler: function (newValue, oldValue) {
                    this.paramsFormData = {};
                    this.paramsFormDataName = {};
                    this.paramsFormDataDescribe = {};
                    this.rules = {};
                    for (let i = 0; i < newValue.length; i++) {
                        let param = i;
                        Vue.set(this.paramsFormData, param, "");
                        this.paramsFormDataName[param] = newValue[i].name;
                        if(this.artifactId == 'ODPairDetectionVehicle'){
                            this.paramsFormDataDescribe = ["车辆点对识别", "/zju/data/taxi", "/czd/odTest", "csv", "0", "1", "2", "3", "4", "10"]
                        }else if(this.artifactId == 'BKmeans'){
                            this.paramsFormDataDescribe = ["聚类分析", "/czd/odTest", "/output/task/od-cluster11/bkmeans_Points", "/output/task/od-cluster11/bkmeans_Clusters", "csv", "2,3", "10", "20", "100"]
                        }else{
                            this.paramsFormDataDescribe[param] = newValue[i].description;
                        }
                        // console.log(newValue[i].name)
                        this.rules[param] = [];
                        let ruleMessage = {};
                        let ruleRequire = {};
                        if (newValue[i].datatype === 'Integer') {
                            ruleRequire["type"] = 'number';
                            ruleRequire["message"] = '参数必须为整数值';
                            ruleMessage["required"] = true;
                        } else if (newValue[i].name.indexOf('范围') !== -1) {
                            ruleMessage["required"] = false;
                        } else {
                            ruleRequire["type"] = '';
                            ruleRequire["message"] = '';
                            ruleMessage["required"] = true;
                        }
                        ruleMessage["message"] = '请输入' + newValue[i].name;
                        ruleMessage["trigger"] = 'blur';
                        ruleRequire["trigger"] = 'blur';
                        this.rules[param][0] = ruleMessage;
                        this.rules[param][1] = ruleRequire;
                    }
                }
            }
        },
        mounted() {
            // let that = this;
            // this.$Bus.$on('coordinate', (params) => {
            //   console.log(params);
            //   // that.$refs.formInput[1].value = params;
            //   that.paramsFormData[1] = params;
            // });
        },
        created(){
        }
    }
</script>

<style>
  .el-input {
    width: 95%;
  }

  #icon:hover {
    color: #409EFF;
  }

  .output input {
    font-size: 0;
    position: absolute;
    left: -999px;
  }

  .output label {
    left: 0;
    /*height: 30px;*/
    /*width: 30px;*/

  }
</style>
